<template>
	<view>
		<view class="mission-header">
			<view class="layout">
				<view class="mission-header-item" v-for="(week,index) in weekDays" :key="index">
					<view>
					{{week.label}}</view>
					<view>
						
							{{week.value}}
					</view>
				</view>				
			</view>
		</view>
		<view v-if="loadState == 'loading'">
			加载中...
		</view>
		<view v-else-if="loadState == 'error'">
			<view>{{loadMsg.title}}</view>
			<view>{{loadMsg.text}}</view>
			<view>
				<view></view>
				<view @click="refreshMissionList()">重新加载</view>
			</view>
		</view>
		<view v-else class="mission-box">
			<view class="mission-box-item" v-for="(mission,index) in missionList" :key="index">
				<view class="mission-box-item-status">
					<view class="layout">						
						<view class="mission-box-item-status-time">{{mission.beginTime}}-{{mission.endTime}}</view>
						<view class="mission-box-item-status-label">
							<view v-if="mission.missionStatus == 1">未开始</view>
							<view v-else-if="mission.missionStatus == 2">进行中</view>
							<view v-else-if="mission.missionStatus == 3">已过期</view>
							<view v-else>未定义</view>
						</view>
					</view>
				</view>
				<view class="mission-box-item-note">
					{{mission.missionName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadState:"loading",
				loadMsg:{
					title:"",
					text:""
				},
				weekDays:[
					{
						label:"日",
						value:"19"
					},
					{
						label:"一",
						value:"20"
					},
					{
						label:"二",
						value:"21"
					},
					{
						label:"三",
						value:"22"
					},
					{
						label:"四",
						value:"23"
					},
					{
						label:"五",
						value:"24"
					},
					{
						label:"六",
						value:"25"
					}
				],
				missionList:[
					{
						missionName:"拜访客户",
						beginTime:"2024-08-25 08：00：25",
						endTime:"2024-08-25 10：00：25",
						missionStatus:2
					},
					{
						missionName:"拜访客户",
						beginTime:"2024-08-25 08：00：25",
						endTime:"2024-08-25 10：00：25",
						missionStatus:2
					},
					{
						missionName:"拜访客户",
						beginTime:"2024-08-25 08：00：25",
						endTime:"2024-08-25 10：00：25",
						missionStatus:2
					}
				]
			}
		},
		onLoad(options) {
			this.weekDays.forEach((week,index)=>{
				console.log(week,index)
			})
			this.loading();
			this.missionList = [];
			let curDate = new Date()
			let curTime = curDate.getTime()
			curTime = parseInt(curTime)
			console.log(curTime,curDate.getDate())
			let weekDay = curDate.getDay()
			weekDay = parseInt(weekDay)
			
			let behineTime = curTime-(60*60*24*weekDay*1000);
			for(let i =0;i < weekDay;i++){
				try{
					let _curDate = new Date(behineTime)
					let _curDay = _curDate.getDate()
					_curDay = parseInt(_curDay)
					if(_curDay < 10){
						_curDay = "0"+_curDay
					}
					this.weekDays[i]['value'] = _curDay
				}catch(e){
					//TODO handle the exception
					console.log(i)
				}
				behineTime = behineTime+(60*60*24*1000)
			}
			while(weekDay < 8){
				try{
					let _curDate = new Date(curTime)
					let _curDay = _curDate.getDate()
					_curDay = parseInt(_curDay)
					if(_curDay < 10){
						_curDay = "0"+_curDay
					}
					this.weekDays[weekDay]['value'] = _curDay
				}catch(e){
					//TODO handle the exception
					console.log(weekDay)
				}
				weekDay = weekDay+1;
				curTime = curTime+(60*60*24*1000)
			}
			console.log(curDate.getDay())
		},
		onShow() {
			this.refreshMissionList()
		},
		methods: {
			loading:function(){
				this.loadState = 'loading';
			},
			loaded:function(){
				this.loadState = 'loaded';
			},
			loadError:function(){
				this.loadState = 'error';
			},
			refreshMissionList:function(){
				let _this = this;
				_this.loading();
				let formData = {
				}
				_this.$schedule.getMissionList(formData).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.loaded();
						_this.missionList = res.data.list;
					}else{
						_this.loadError();
						_this.loadMsg.title = res.msg;
						_this.loadMsg.text = res.debug
					}
				}).catch(res=>{
					console.log("加载错误",res)
				})
			},
			
		}
	}
</script>

<style>
page { background: #ededed; }
.mission-header { background: #fff; padding: 15rpx; }
.mission-header-item { text-align: center; width: 100rpx; }

.mission-box { padding: 15rpx; }
.mission-box-item { background: #fff; padding: 15rpx; border-radius: 10rpx; margin-bottom: 25rpx;}
.mission-box-item-status-time { width: 500rpx; height: 32rpx; font-size:14px; text-align: left; overflow: hidden;}
.mission-box-item-status-label { width: 200rpx; text-align: right;}

.mission-box-item-note { font-size: 18px; font-weight: 900; padding: 15rpx 0; }
</style>
